<template>
	<div v-if="index <= 3" class="rank">
		<span>{{ text }}</span>
		<img v-if="imgurl !== ''" :src="imgurl" />
	</div>
</template>
<script>
import gold from '@/assets/images/gold.svg'
import silver from '@/assets/images/silver.svg'
import copper from '@/assets/images/copper.svg'
export default {
	name: 'Rank',
	props: {
		index: {
			type: Number,
			default: () => {
				return 1
			}
		},
		text: {
			type: String,
			default: () => {
				return ''
			}
		}
	},
	data() {
		return {
			imgs: [gold, silver, copper]
		}
	},
	computed: {
		imgurl: function () {
			return this.imgs[this.index - 1] ? this.imgs[this.index - 1] : ''
		}
	}
}
</script>
<style>
.rank {
	position: relative;
	width: 28px;
	height: 28px;
	border-radius: 50%; /* To create a circle shape */
	text-align: center; /* To center the '0' */
	background: #e1e4e7;
}

.rank span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); /* To center the '0' */
	font-family: PingFangSC-Semibold;
	font-size: 14px;
	color: #ffffff;
	letter-spacing: 0;
	text-align: center;
	line-height: 14px;
	font-weight: 600;
}

.rank img {
	position: absolute;
	right: -30%;
	bottom: -30%;
	/* You may need to adjust the size of the image */
}
</style>
